<template>
    <div class="qishuqi">
        <div class="qi-one">{{ uname }}</div>
        <div class="qi-one-q">
            <div class="qi-one-w" @click="setName1()">减</div>
            <div class="qi-one-ww" @click="setName()">加</div>
        </div>
        <div class="qi-two" v-if="uname2">
            <div class="qi-two-q" @click="setCount()">{{ uname1 }} </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            uname: 0,
            uname1: '任务完成',
            uname2: false,
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() { },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        setName() {
            this.uname = this.uname + 1;
            this.setCount();
        },
        setName1() {
            this.uname = this.uname - 1;
        },
        setCount() {
            if (this.uname > 10) {
                this.uname2 = true
            }
            else { this.uname2 = false };
        },
    }
};
</script>


<style scoped lang="scss">
.qishuqi {

    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    position: relative;

    .qi-one {
        width: 50px;
        height: 50px;
        border: 1px solid red;
        font-size: 38px;
        font-weight: 600;
        text-align: center;
        line-height: 50px;
    }

    .qi-one-q {
        position: absolute;
        display: flex;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: space-between;

        .qi-one-w {
            font-size: 50px;
            font-weight: 600;
        }

        .qi-one-ww {
            font-size: 50px;
            font-weight: 600;

        }
    }

    .qi-two {
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;

        .qi-two-q {
            height: 45px;
            width: 120px;
            font-size: 20px;
            font-weight: 600;
            background-color: antiquewhite;
            text-align: center;
            line-height: 45px;
        }
    }
}
</style>